<template>
  <!-- Vue3 新特性：允许多个根组件 -->
  <h1>{{ obj }}</h1>
  <button @click="obj.age++">点击年龄加1</button>
  <button @click="obj.name += '啊'">点击啊一声</button>
  <button @click="obj.cp.age++">点击cp年龄加1</button>
</template>

<script>
  /* 
      watch监视, 可接收三个参数
        1. 参数1: 监视的数据源
        2. 参数2: 回调函数
        3. 参数3: 额外的配置(深度监听和立刻执行)
  */
  import { reactive, watch } from "vue";
  export default {
    name: "App",
    setup() {
      // 响应式对象
      const obj = reactive({
        name: "张三",
        age: 18,
        cp: {
          name: "李四",
          age: 20,
        },
      });

      // 写法1：监听整个响应式对象
      // watch(obj, () => {
      //   console.log("obj发生了变化", obj);
      //   localStorage.setItem("obj", JSON.stringify(obj));
      // });

      // 写法2：监听响应式对象的某个属性，第一个参数要写成函数
      watch(
        () => obj.age,
        (newVal, oldVal) => {
          console.log("obj.age 发生了变化", { newVal, oldVal });
        }
      );

      // 写法3：第三个参数为额外配置，可以设置 deep 深度监听 和 immediate 立刻执行
      watch(
        () => obj.cp,
        () => {
          console.log("obj.cp 发生了变化");
        },
        { deep: true, immediate: true }
      );

      return { obj };
    },
  };
</script>
